<template>
    <div class="flex flex-col h-full w-full">
        <div class="tool-bar">
            <div class="flex mb-1">
                <ElInput
                    v-model="inputingUrl"
                    placeholder="请输入网址"
                    class="w-full mr-1"
                    @keypress.enter="goTo(inputingUrl)"
                ></ElInput>
                <!-- <ElCheckbox v-model="explorerConfig.isPhone">移动端</ElCheckbox> -->
                <ElButton @click="goTo(inputingUrl)">前往</ElButton>
                <ElButton @click="toggleDevtools"
                    >{{ explorerConfig.devtoolsOpened ? '关闭' : '打开' }}开发者工具</ElButton
                >
            </div>
            <div class="phone-tool flex" v-if="false">
                <!-- 尺寸 -->
                <div class="flex items-center mr-1">
                    size: <ElInput class="w-[50px] mr-1" v-model="mobileConfig.width" /> x
                    <ElInput class="w-[50px] ml-1" v-model="mobileConfig.height" />
                </div>
                <!-- 缩放 -->
                <div class="flex items-center">
                    scale: <ElInput class="w-[40px] mr-1" v-model="mobileConfig.scale" />%
                </div>
            </div>
        </div>
        <div class="content w-full h-full">
            <div class="web-content-view w-full h-full" ref="webContentViewRef"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElButton, ElInput } from 'element-plus'
import { onActivated, onDeactivated, onMounted, onUnmounted, reactive, ref, useTemplateRef } from 'vue'
import { BrowserContent } from './utils/browserContent'
import './utils/installExtension'

// 事件
const emit = defineEmits(['backgroundImageSelected'])
// 需要用到的变量
const inputingUrl = ref('https://lanhuapp.com/link/#/invite?sid=lx0gUnMS')
// 浏览器相关配置
const explorerConfig = reactive({
    isPhone: false,
    devtoolsOpened: false
})
// 移动端模拟相关配置
const mobileConfig = reactive({
    width: 375,
    height: 667,
    deviceScaleFactor: 2,
    scale: 1
})
// 保存webview的引用
const webContentViewRef = useTemplateRef('webContentViewRef')
// 浏览器实例
const browserContent = new BrowserContent()

// 页面加载完成
onMounted(async () => {
    if (!webContentViewRef.value) return
    browserContent.initBrowserContent({
        initialUrl: inputingUrl.value,
        containerDom: webContentViewRef.value,
        onBackgroundImageSelected: (message) => {
            // ElMessage.info(message)
            // url("http://localhost:8081/@fs/Users/changba-cdos-068/changba/images/bg_act_header__link.png")
            // TODO: 获取图片路径，这里可能需要处理
            const filePath = message.split('@fs')[1]?.replace(`")`, '')
            if (!filePath) return
            emit('backgroundImageSelected', filePath)
        }
    })
})

// 前往
const goTo = async (url: string) => {
    // 补全url
    if (!url.startsWith('http')) {
        url = 'http://' + url
    }

    inputingUrl.value = url

    browserContent.loadUrl(url)
    // webview.executeJavaScript(`window.location.href = '${url}';`)
}

// 打开开发者工具
const toggleDevtools = async () => {
    // 打开开发者工具
    const webContent = browserContent.getWebContentsView()?.webContents
    if (!webContent) return
    if (explorerConfig.devtoolsOpened) {
        webContent.closeDevTools()
        explorerConfig.devtoolsOpened = false
        return
    }
    webContent.openDevTools({ mode: 'right' })
    explorerConfig.devtoolsOpened = true
}

// 组件的可见性发生变化
onDeactivated(() => {
    browserContent.hide()
})
onActivated(() => {
    browserContent.show()
})
onUnmounted(() => {
    browserContent.destroy()
})

// 如果页面刷新也要销毁
window.addEventListener('beforeunload', () => {
    browserContent.destroy()
})
</script>

<style scoped>
.gutter-col {
    grid-row: 1/-1;
    cursor: col-resize;
    background: #e5e7eb;
}

.gutter-col-1 {
    grid-column: 2;
}
</style>
